<template>
  <div class="quality-task-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>质量检验任务管理</h2>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-bar">
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增
        </el-button>
        <!-- <el-button type="success" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出
        </el-button> -->
        <el-button 
          type="danger" 
          :disabled="selectedRows.length === 0"
          @click="handleBatchDelete"
        >
          <el-icon><Delete /></el-icon>
          删除
        </el-button>
      </div>
      
      
    </div>
     <el-form :inline="true" :model="ment" class="demo-form-inline">
    <el-form-item label="单号">
      <el-input v-model="ment.TaskNo"  clearable />
    </el-form-item>
    <el-form-item label="质检分类">
      <el-select
        v-model="ment.QualityType"
        clearable
      >
        <el-option
           
              label="首检"
              value="1"
            />
           
              <el-option
              label="巡检"
              value="2"
            />
             <el-option
           
              label="未检"
              value="3"
            />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="loadTableData">查询</el-button>
    </el-form-item>
  </el-form>

    <!-- 主数据表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      stripe
    >
      <!-- 复选框列 -->
      <el-table-column type="selection" width="55" />
      
      <!-- 序号列 -->
      <el-table-column prop="index" label="序号" width="80" />
      
      <!-- 单号列 -->
      <el-table-column prop="taskNo" label="单号" width="150">
        <template #header>
          <span>单号</span>
          <el-icon class="search-icon"><Search /></el-icon>
        </template>
      </el-table-column>
      
      <!-- 质检分类列 -->
      <el-table-column prop="qualityType" label="质检分类" width="120">
        <template #header>
          <span>质检分类</span>
          <el-icon class="search-icon"><Search /></el-icon>
        </template>
       
      </el-table-column>
      
      <!-- 工单列 -->
      <el-table-column prop="qualityProposal" label="工单" width="120">
        <template #header>
          <span>工单</span>
          <el-icon class="search-icon"><Search /></el-icon>
        </template>
      </el-table-column>
      
      <!-- 检验方案列 -->
      <el-table-column prop="ticketCode" label="检验方案" width="150">
        <template #header>
          <span>检验方案</span>
          <el-icon class="search-icon"><Search /></el-icon>
        </template>
      </el-table-column>
      <!-- 角色名称列 -->
      <el-table-column prop="permissionRoleId" label="角色名称" width="120">
        
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleAdd(row)">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
      v-model:current-page="paing.PageIndex"
      v-model:page-size="paing.PageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paing.totalCount"

    />
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <!-- 单号字段 -->
        <el-form-item label="单号" prop="orderNumber">
          <el-icon class="info-icon"><InfoFilled /></el-icon>
          <el-input
            v-model="formData.taskNo"
            placeholder="自动生成"
            disabled
          />
        </el-form-item>

        <!-- 质检分类字段 -->
        <el-form-item label="质检分类" prop="qualityType" required>
          <el-select
            v-model="formData.qualityType"
            placeholder="请选择质检分类"
            style="width: 100%"
          >
            <el-option
              v-for="item in qualityCategoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- 检验方案字段 -->
        <el-form-item label="检验方案" prop="qualityProposal" required>
          <el-input
            v-model="formData.qualityProposal"
            placeholder="请选择数据"
            readonly
            @click="openInspectionPlanDialog"
          >
            <template #suffix>
              <el-icon class="el-input__icon"><ArrowDown /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 工单字段 -->
        <el-form-item label="工单" prop="ticketCode" required>
          <el-input
            v-model="formData.ticketCode"
            placeholder="请选择数据"
            readonly
            @click="openWorkOrderDialog"
          >
            <template #suffix>
              <el-icon class="el-input__icon"><ArrowDown /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 权限角色字段 -->
        <el-form-item label="权限角色" prop="permissionRoleId" required>
          <el-select
            v-model="formData.permissionRoleId"
            placeholder="请选择权限角色"
            style="width: 100%"
          >
            <el-option
           
              label="系统管理员"
              value="1"
            />
           
              <el-option
              label="shangsan"
              value="2"
            />
             <el-option
           
              label="管理员"
              value="3"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 检验方案选择对话框 -->
    <el-dialog
      v-model="logic.isOpen"
      title="选择数据"
      width="800px"
      :close-on-click-modal="false"
    >
      <!-- 工具栏 -->
      <div class="dialog-toolbar">
        <div class="toolbar-icons">
          <el-icon class="icon"><Grid /></el-icon>
          <el-icon class="icon"><Search /></el-icon>
          <el-icon class="icon"><Refresh /></el-icon>
          <el-icon class="icon"><Setting /></el-icon>
          <el-icon class="icon"><Filter /></el-icon>
        </div>
      </div>

      <!-- 检验方案数据表格 -->
      <el-table
        :data="inspectionPlanData"
        style="width: 100%"
        @row-click="selectInspectionPlan"
        highlight-current-row
      >
        <el-table-column width="60">
          <template #default="{ row, $index }">
            <el-radio
              v-model="selectedInspectionPlan"
              :label="row.designId"
              @change="selectInspectionPlan(row)"
            >
              {{ $index + 1 }}
            </el-radio>
          </template>
        </el-table-column>
        
        <el-table-column prop="designName" label="名称" width="150">
          <template #header>
            <span>名称</span>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
        </el-table-column>
        
        <el-table-column prop="desugbType" label="类型" width="100">
          <template #header>
            <span>类型</span>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
          <template v-slot="scope">
           <el-tag type="warning" v-if="scope.row.desugbType==1">全检</el-tag>
           <el-tag type="danger" v-else>抽检</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="samplingMethod" label="抽检方式" width="120">
          <template #header>
            <span>抽检方式</span>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
          <template #default="{ row }">
            <el-tag :type="getSamplingTagType(row.samplingMethod)" size="small">
              {{ row.samplingMethod }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="value" label="值" width="120">
          <template #header>
            <span>值</span>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
        </el-table-column>
        
        <el-table-column prop="description" label="描述">
          <template #header>
            <span>描述</span>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
        </el-table-column>
      </el-table>

     

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="logic.isOpen = false">取消</el-button>
          <el-button type="primary" @click="confirmInspectionPlan">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 工单选择对话框 -->
    <el-dialog
      v-model="logic2.isOpen"
      title="选择数据"
      width="800px"
      :close-on-click-modal="false"
    >
      <!-- 工具栏 -->
      <div class="dialog-toolbar">
        <div class="toolbar-icons">
          <el-icon class="icon"><Grid /></el-icon>
          <el-icon class="icon"><Search /></el-icon>
          <el-icon class="icon"><Refresh /></el-icon>
          <el-icon class="icon"><Setting /></el-icon>
          <el-icon class="icon"><Filter /></el-icon>
        </div>
      </div>

      <!-- 工单数据表格 -->
      <el-table
        :data="workOrderData"
        style="width: 100%"
        @row-click="selectWorkOrder"
        highlight-current-row
      >
        <el-table-column width="60">
          <template #default="{ row, $index }">
            <el-radio
              v-model="selectedWorkOrder"
              :label="row.examineId"
              @change="selectWorkOrder(row)"
            >
              {{ $index + 1 }}
            </el-radio>
          </template>
        </el-table-column>
        
        <el-table-column prop="examineNo" label="工单号" width="150">
          <template #header>
            <span>工单号</span>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
        </el-table-column>
        
        <el-table-column prop="examineName" label="产品名称" width="200">
          <template #header>
            <span>产品名称</span>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
        </el-table-column>
      </el-table>

    

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="logic2.isOpen = false">取消</el-button>
          <el-button type="primary" @click="confirmWorkOrder">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed,watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Download,
  Delete,
  Grid,
  Search,
  Refresh,
  Close,
  Setting,
  InfoFilled,
  ArrowDown,
  Filter
} from '@element-plus/icons-vue'
import { APIs } from '@/Http/http'
import { paginationPagerProps } from 'element-plus/es/components/pagination/src/components/pager.mjs'

// 接口类型定义
interface QualityTask {
  id: number
  taskNo: string
  qualityType: string
  ticketCode: string
  qualityProposal: string
  permissionRoleId: string
}

interface qualityProposal {
  id: number
  name: string
  type: string
  samplingMethod: string
  value: string
  description: string
}

interface ticketCode {
  id: number
  orderNumber: string
  productName: string
  quantity: number
  status: string
  createTime: string
}

// 响应式数据
const tableData = ref<QualityTask[]>([])
const selectedRows =ref<any[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const isEdit = ref(false)
const editingId = ref<number | null>(null)

// 表单数据
const formData = reactive({

  taskId:0,
  taskNo: "",
  qualityType: "",
  qualityProposal: "",
  ticketCode: "",
  permissionRoleId: ""

 /*  orderNumber: '',
  qualityCategory: '',
  inspectionPlan: '',
  workOrder: '',
  role: '' */
})

// 表单验证规则
const formRules = {
  qualityType: [
    { required: true, message: '请选择质检分类', trigger: 'change' }
  ],
  qualityProposal: [
    { required: true, message: '请选择检验方案', trigger: 'change' }
  ],
  ticketCode: [
    { required: true, message: '请选择工单', trigger: 'change' }
  ],
  permissionRoleId: [
    { required: true, message: '请选择权限角色', trigger: 'change' }
  ]
}

// 下拉选项
const qualityCategoryOptions = [
  { label: '首检', value: '1' },
  { label: '巡检', value: '2' },
  { label: '未检', value: '3' }
]



// 检验方案对话框相关

const logic=reactive({
    isOpen:false
})

const logic2=reactive({
    isOpen:false
})

const inspectionPlanData = ref<any[]>([])
const selectedInspectionPlan = ref<number | null>(null)
const selectedInspectionPlanData = ref<any | null>(null)


// 工单对话框相关

const workOrderData = ref<any[]>([])
const selectedWorkOrder = ref<number | null>(null)
const selectedWorkOrderData = ref<any | null>(null)
const workOrderCurrentPage = ref(1)
const workOrderPageSize = ref(10)
const workOrderTotal = ref(0)

// 计算属性
const formRef = ref()

// 方法定义

/**
 * 获取质检分类标签类型
 * @param category 质检分类
 * @returns 标签类型
 */
const getCategoryTagType = (category: string) => {
  switch (category) {
    case '首检': return 'info'
    case '巡检': return 'primary'
    case '未检': return 'success'
    default: return 'info'
  }
}

/**
 * 获取类型标签类型
 * @param type 类型
 * @returns 标签类型
 */
const getTypeTagType = (type: string) => {
  switch (type) {
    case '抽检': return 'primary'
    case '全检': return 'warning'
    default: return 'info'
  }
}

/**
 * 获取抽检方式标签类型
 * @param method 抽检方式
 * @returns 标签类型
 */
const getSamplingTagType = (method: string) => {
  switch (method) {
    case '百分比': return 'danger'
    case '间隔': return 'warning'
    default: return 'info'
  }
}

/**
 * 获取工单状态标签类型
 * @param status 状态
 * @returns 标签类型
 */
const getWorkOrderStatusTagType = (status: string) => {
  switch (status) {
    case '进行中': return 'primary'
    case '已完成': return 'success'
    case '已暂停': return 'warning'
    default: return 'info'
  }
}

/**
 * 处理表格选择变化
 * @param selection 选中的行数据
 */
const handleSelectionChange = (selection:any[]) => {
  selectedRows.value = selection
  console.log(selection);
}

/**
 * 处理新增按钮点击
 */
const handleAdd = (row:any) => {
  if(row==null)
{
 dialogTitle.value = '新增'
  isEdit.value = true
  editingId.value = null
  resetForm()
  //generateOrderNumber()

  dialogVisible.value = true

}
else
{
    dialogTitle.value = '编辑'
  isEdit.value = false,
  formData.taskId=row.taskId
  formData.taskNo = row.taskNo
  formData.qualityType = row.qualityType
  formData.qualityProposal = row.qualityProposal
  formData.ticketCode = row.ticketCode
  formData.permissionRoleId = row.permissionRoleId
  dialogVisible.value = true
}
 
  
}


/**
 * 处理删除按钮点击
 * @param row 行数据
 */
const handleDelete = async (row: any) => {
    ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        APIs.delete("/api/Write/DeleteExaminTask",{params:{taskId:row.taskId}}).then(res=>{
    if(res.data.code==100)
 {
     ElMessage.success(res.data.msg);
     loadTableData();
    
 }
 else
 {
  ElMessage.error(res.data.msg);
  return;
 }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

/**
 * 处理批量删除
 */
const handleBatchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }

  var codeside=selectedRows.value.map((x)=>x.taskId).toString();
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      
        APIs.delete("/api/Write/AllDeleteExamineTask",{params:{taskcode:codeside}}).then(res=>{
    if(res.data.code==100)
 {
     ElMessage.success(res.data.msg);
      loadTableData();
 }
 else
 {
  ElMessage.error(res.data.msg);
  return;
 }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })


  /* try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedRows.value.length} 条质检任务吗？`,
      '批量删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用批量删除接口
    const ids = selectedRows.value.map(row => row.id)
    await batchDeleteQualityTasks(ids)
    
    ElMessage.success('批量删除成功')
    await loadTableData()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败')
      console.error('批量删除失败:', error)
    }
  } */
}

/**
 * 处理导出按钮点击
 */
const handleExport = async () => {
  try {
    ElMessage.info('正在导出数据...')
    
    // 调用导出接口
    await exportQualityTasks()
    
    ElMessage.success('导出成功')
  } catch (error) {
    ElMessage.error('导出失败')
    console.error('导出失败:', error)
  }
}

/**
 * 处理保存按钮点击
 */
const handleSave =()=> {
/*   try {
    // 表单验证
    await formRef.value.validate()
    
    if (isEdit.value) {
      // 编辑模式
      await updateQualityTask(editingId.value!, formData)
      ElMessage.success('更新成功')
    } else {
      // 新增模式
      await createQualityTask(formData)
      ElMessage.success('新增成功')
    }
    
    dialogVisible.value = false
    await loadTableData()
  } catch (error) {
    ElMessage.error(isEdit.value ? '更新失败' : '新增失败')
    console.error('保存失败:', error)
  } */
 if(isEdit.value)
 {
 let command=reactive<any>({})
   command.taskNo=formData.taskNo,
  command.qualityType=formData.qualityType,
  command.qualityProposal=formData.qualityProposal,
  command.ticketCode=formData.ticketCode,
  command.permissionRoleId=formData.permissionRoleId
 APIs.post("/api/Write/AddExamineTask",command).then(res=>{
  if(res.data.code==100)
 {
  ElMessage.success(res.data.msg)
    dialogVisible.value = false
     loadTableData();
 }
 else
 {
    ElMessage.error(res.data.msg)
    return;
 }
 })
 }
 else
 {

  APIs.post("/api/Write/UpdateExamineTask",formData).then(res=>{
  if(res.data.code==100)
 {
     ElMessage.success(res.data.msg);
       logic.isOpen=false;
        loadTableData();
 }
 else
 {
  ElMessage.error(res.data.msg);
  return;
 }
 })


 }

}

/**
 * 打开检验方案选择对话框
 */
const openInspectionPlanDialog = async () => {
  selectedInspectionPlan.value = null
  selectedInspectionPlanData.value = null
  await loadInspectionPlanData()
  logic.isOpen = true
}

/**
 * 选择检验方案
 * @param row 选中的行数据
 */
const selectInspectionPlan = (row: any) => {
  selectedInspectionPlan.value = row.designId
  selectedInspectionPlanData.value = row
}

/**
 * 确认选择检验方案
 */
const confirmInspectionPlan = () => {
  if (selectedInspectionPlanData.value) {
    formData.qualityProposal = selectedInspectionPlanData.value.designName
     logic.isOpen = false
  } else {
    ElMessage.warning('请选择检验方案')
  }
}

/**
 * 打开工单选择对话框
 */
const openWorkOrderDialog = async () => {
  selectedWorkOrder.value = null
  selectedWorkOrderData.value = null
  await loadWorkOrderData()
  logic2.isOpen= true
}

/**
 * 选择工单
 * @param row 选中的行数据
 */
const selectWorkOrder = (row: any) => {
  selectedWorkOrder.value = row.examineId
  selectedWorkOrderData.value = row
}

/**
 * 确认选择工单
 */
const confirmWorkOrder = () => {
  if (selectedWorkOrderData.value) {
    formData.ticketCode = selectedWorkOrderData.value.examineNo
    logic2.isOpen = false
  } else {
    ElMessage.warning('请选择工单')
  }
}


/**
 * 重置表单
 */
const resetForm = () => {
  formData.taskNo = ''
  formData.qualityType = ''
  formData.qualityProposal = ''
  formData.ticketCode = ''
  formData.permissionRoleId = ''
}

/**
 * 生成单号
 */
const generateOrderNumber = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const random = String(Math.floor(Math.random() * 10000)).padStart(4, '0')
  formData.taskNo = `QC${year}${month}${day}${random}`
}

// 后端接口调用方法

/**
 * 加载表格数据
 */
const loadTableData = async () => {
/*   try {
    // 这里应该调用实际的后端接口
    // const response = await api.getQualityTasks({
    //   page: currentPage.value,
    //   pageSize: pageSize.value
    // })
    
    // 模拟数据加载
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 使用测试数据 [[memory:8189833]]
    tableData.value = [
      {
        id: 1,
        taskNo: 'QC2024070400001',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: '基础检查1',
        permissionRoleId: '系统管理员'
      },
      {
        id: 2,
        taskNo: 'QC2024070600005',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: '基础检查1',
        permissionRoleId: '系统管理员'
      },
      {
        id: 3,
        taskNo: 'QC2024070800003',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: '测试0914',
        permissionRoleId: '系统管理员'
      },
      {
        id: 4,
        taskNo: 'QC2024071000007',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: 'TEST',

        permissionRoleId: '系统管理员'
      },
      {
        id: 5,
        taskNo: 'QC2024071200002',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: '基础检查1',
        permissionRoleId: '系统管理员'
      },
      {
        id: 6,
        taskNo: 'QC2024071400009',
        qualityType: '巡检',
        ticketCode: '',
        qualityProposal: '基础检查1',
        permissionRoleId: '系统管理员'
      },
      {
        id: 7,
        taskNo: 'QC2024071600004',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: '测试0914',
        permissionRoleId: '系统管理员'
      },
      {
        id: 8,
        taskNo: 'QC2024071800006',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: 'TEST',
        permissionRoleId: '系统管理员'
      },
      {
        id: 9,
        taskNo: 'QC2024072000008',
        qualityType: '未检',
        ticketCode: '',
        qualityProposal: '基础检查1',
        permissionRoleId: '系统管理员'
      },
      {
        id: 10,
        taskNo: 'QC2024072200010',
        qualityType: '首检',
        ticketCode: '',
        qualityProposal: '测试0914',
        permissionRoleId: '系统管理员'
      }
    ]
    
    total.value = 51 // 模拟总数
  } catch (error) {
    ElMessage.error('加载数据失败')
    console.error('加载数据失败:', error)
  } */
 APIs.get("/api/Read/GetExamineTask",{
  params:{
    TaskNo:ment.TaskNo,
    QualityType:ment.QualityType || 0,
    PageIndex:paing.PageIndex,
    PageSize:paing.PageSize

  }
 }).then(res=>{
  tableData.value=res.data.data.data;
  paing.total=res.data.data.total;
  paing.totalCount=res.data.data.totalCount
 })
}

/**
 * 创建质检任务
 * @param data 质检任务数据
 */
const createQualityTask = async (data: any) => {
  try {
    // 这里应该调用实际的后端接口
    // const response = await api.createQualityTask(data)
    
    // 模拟接口调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    console.log('创建质检任务:', data)
  } catch (error) {
    throw error
  }
}

/**
 * 更新质检任务
 * @param id 质检任务ID
 * @param data 更新数据
 */
const updateQualityTask = async (id: number, data: any) => {
  try {
    // 这里应该调用实际的后端接口
    // const response = await api.updateQualityTask(id, data)
    
    // 模拟接口调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    console.log('更新质检任务:', id, data)
  } catch (error) {
    throw error
  }
}

/**
 * 删除质检任务
 * @param id 质检任务ID
 */
const deleteQualityTask = async (id: number) => {
  try {
    // 这里应该调用实际的后端接口
    // const response = await api.deleteQualityTask(id)
    
    // 模拟接口调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    console.log('删除质检任务:', id)
  } catch (error) {
    throw error
  }
}

/**
 * 批量删除质检任务
 * @param ids 质检任务ID数组
 */
const batchDeleteQualityTasks = async (ids: number[]) => {
  try {
    // 这里应该调用实际的后端接口
    // const response = await api.batchDeleteQualityTasks(ids)
    
    // 模拟接口调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    console.log('批量删除质检任务:', ids)
  } catch (error) {
    throw error
  }
}

/**
 * 导出质检任务
 */
const exportQualityTasks = async () => {
  try {
    // 这里应该调用实际的后端接口
    // const response = await api.exportQualityTasks()
    
    // 模拟接口调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    console.log('导出质检任务')
  } catch (error) {
    throw error
  }
}

/**
 * 加载检验方案数据
 */

const loadInspectionPlanData=()=> {
  //try {
    // 这里应该调用实际的后端接口
    // const response = await api.getInspectionPlans({
    //   page: inspectionPlanCurrentPage.value,
    //   pageSize: inspectionPlanPageSize.value
    // })
    
  /*   // 模拟数据加载
    await new Promise(resolve => setTimeout(resolve, 300)) */
    
    // 使用测试数据
   /* const inspectionPlanData=ref<any>([]) */
    
  
 // } catch (error) {
   // ElMessage.error('加载检验方案数据失败')
   // console.error('加载检验方案数据失败:', error)
  //}
  APIs.get("/api/Read/ShowExaminDesign").then(res=>{

    inspectionPlanData.value=res.data.data;
  })
}

/**
 * 加载工单数据
 */
const loadWorkOrderData = async () => {
/*   try {
    // 这里应该调用实际的后端接口
    // const response = await api.getWorkOrders({
    //   page: workOrderCurrentPage.value,
    //   pageSize: workOrderPageSize.value
    // })
    
    // 模拟数据加载
    await new Promise(resolve => setTimeout(resolve, 300))
    
    // 使用测试数据
    workOrderData.value = [
      { id: 1, orderNumber: 'WO20240701001', productName: '产品A', quantity: 100, status: '进行中', createTime: '2024-07-01 09:00:00' },
      { id: 2, orderNumber: 'WO20240701002', productName: '产品B', quantity: 200, status: '已完成', createTime: '2024-07-01 10:00:00' },
      { id: 3, orderNumber: 'WO20240701003', productName: '产品C', quantity: 150, status: '进行中', createTime: '2024-07-01 11:00:00' },
      { id: 4, orderNumber: 'WO20240701004', productName: '产品D', quantity: 300, status: '已暂停', createTime: '2024-07-01 12:00:00' },
      { id: 5, orderNumber: 'WO20240701005', productName: '产品E', quantity: 80, status: '进行中', createTime: '2024-07-01 13:00:00' },
      { id: 6, orderNumber: 'WO20240701006', productName: '产品F', quantity: 120, status: '已完成', createTime: '2024-07-01 14:00:00' },
      { id: 7, orderNumber: 'WO20240701007', productName: '产品G', quantity: 250, status: '进行中', createTime: '2024-07-01 15:00:00' },
      { id: 8, orderNumber: 'WO20240701008', productName: '产品H', quantity: 180, status: '已暂停', createTime: '2024-07-01 16:00:00' },
      { id: 9, orderNumber: 'WO20240701009', productName: '产品I', quantity: 90, status: '进行中', createTime: '2024-07-01 17:00:00' },
      { id: 10, orderNumber: 'WO20240701010', productName: '产品J', quantity: 220, status: '已完成', createTime: '2024-07-01 18:00:00' }
    ]
    
    workOrderTotal.value = 25
  } catch (error) {
    ElMessage.error('加载工单数据失败')
    console.error('加载工单数据失败:', error)
  } */
 APIs.get("/api/Read/ShowExamineType").then(res=>{
    workOrderData.value=res.data.data;
 })
}

// 组件挂载时加载数据
onMounted(() => {
  loadTableData()
 
})
const paing=reactive({
  PageIndex:1,
  PageSize:10,
  total:0,
  totalCount:1
})
watch(paing,()=>{
  loadTableData();
})

const ment=reactive({
  TaskNo:"",
  QualityType:""
})

</script>

<style scoped>
.quality-task-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.toolbar-icons {
  display: flex;
  gap: 12px;
}

.icon {
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
}

.icon:hover {
  color: #409eff;
}

.search-icon {
  margin-left: 8px;
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.dialog-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.info-icon {
  margin-right: 8px;
  color: #409eff;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #fafafa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

/* 标签样式 */
:deep(.el-tag) {
  border: none;
  font-weight: 500;
}

/* 按钮样式 */
:deep(.el-button) {
  border-radius: 6px;
  font-weight: 500;
}

:deep(.el-button--small) {
  padding: 5px 12px;
  font-size: 12px;
}

/* 对话框样式 */
:deep(.el-dialog) {
  border-radius: 12px;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 10px 20px 20px;
  border-top: 1px solid #ebeef5;
}

/* 表单样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}

:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #909399;
}

/* 分页样式 */
:deep(.el-pagination) {
  justify-content: center;
}

/* 单选按钮样式 */
:deep(.el-radio) {
  margin-right: 0;
}

:deep(.el-radio__label) {
  display: none;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>

